<template>
  <div class="management-user-edit views-container">
    <el-dialog :visible.sync="userdialog" custom-class="reset-pwd wlm-form-dialog dialog-table">
      <div class="wlm-form" v-if="userdialog">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">用户资料</span>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <div class="wlm-form-content">
            <div class="wlm-dialog-main">
              <div class="wlm-dialog-content">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                  <el-form-item label="用户">
                    <div class="flex-row">
                      <img width="60" height="60" :src="formFormatData.formData.avatarUrl" style="margin-right:10px;" />
                      <div>
                        <p>{{formFormatData.formData.nickName}}</p>
                        <p>{{formFormatData.formData.user_id}}</p>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-select placeholder="请选择" v-model="formFormatData.formData.gender">
                      <el-option v-for="item in [{lable:'未知',value:0},{lable:'男',value:1},{lable:'女',value:2}]" :key="item.value" :label="item.lable" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <el-input v-model="formFormatData.formData.mobile" placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="黑名单">
                    <el-radio-group v-model="formFormatData.formData.status">
                      <el-radio :label="3">加入</el-radio>
                      <el-radio :label="1">不加入</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="small" @click="userdialog = false;formFormatSubmit()" type="primary">保存</el-button>
      </footer>
    </el-dialog>

    <el-dialog :visible.sync="rechargedialog" @close="clearBalance" custom-class="reset-pwd wlm-form-dialog dialog-table">
      <div class="wlm-form" v-if="rechargedialog">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">{{update_class==1?'积分':update_class==2?'余额':'可提现佣金'}}调整</span>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <div class="wlm-form-content">
            <div class="wlm-dialog-main">
              <div class="wlm-dialog-content">
                <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                  <el-form-item :label="update_class==1?'积分':update_class==2?'余额':'佣金'">
                    <el-input-number :controls="false" v-model.number="update_money"></el-input-number>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input placeholder="调整说明..." v-model="update_explain"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="small" @click="saveBalanceChange" type="primary">保存</el-button>
      </footer>
    </el-dialog>

    <section class="flex-row flex-warp form-group">
      <div class="wlm-form">
        <div class="wlm-form-header flex-row flex-justify-b">
          <span>基本资料</span>
          <div>
            <el-button type="text" size="small" @click="formFormatData.formData.op='edit';userdialog = true">资料修改</el-button>
          </div>
        </div>
        <div class="orbox flex-row flex-justify-a">
          <div class="flex-row">
            <img width="50" height="50" :src="formFormatData.formData.avatarUrl" style="margin-right:16px;" />
            <div>
              <p style="line-height:1.8">{{formFormatData.formData.nickName}}</p>
              <svg-icon v-if="formFormatData.formData.gender==1" style="font-size:20px;vertical-align: middle;" icon-class="man" />
              <svg-icon v-if="formFormatData.formData.gender==2" style="font-size:20px;vertical-align: middle;" icon-class="woman" />
              <el-tooltip class="item" effect="dark" :content="sourceType[`${formFormatData.formData.source}`]" placement="top">
                <img style="vertical-align: middle;" height="20" width="20" :src="sourceImg[`${formFormatData.formData.source || '-'}`]" alt />
              </el-tooltip>
              <!-- <p style="line-height:1.8">{{`ID：${formFormatData.formData.user_id}`}}</p> -->
            </div>
          </div>
          <div>
            <p>积分</p>
            <div class="flex-row flex-align-c">
              <span style="margin-right:10px;">{{formFormatData.formData.integral}}</span>
              <el-button type="text" size="small" @click="balanceChange(1)">充值</el-button>
            </div>
          </div>
          <div>
            <p>余额</p>
            <div class="flex-row flex-align-c">
              <span style="margin-right:10px;">{{formFormatData.formData.balance}}</span>
              <el-button type="text" size="small" @click="balanceChange(2)">充值</el-button>
            </div>
          </div>
        </div>
        <div class="wlm-form-content flex-row flex-justify-b">
          <el-form :ref="formFormatData.key" style="margin-left:20px;" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form">
            <el-form-item label="手机号码：">
              <span>{{formFormatData.formData.mobile}}</span>
            </el-form-item>
            <el-form-item label="注册时间：">
              <span>{{formFormatData.formData.create_time}}</span>
            </el-form-item>
            <el-form-item label="标签：">
              <el-tag v-for="(item, index) in formFormatData.formData.tag" :key="index" style="margin-right:10px;">{{item.name}}</el-tag>
              <!-- <span  ></span> -->
              <span v-if="formFormatData.formData.tag.length==0">-</span>
            </el-form-item>
            <el-form-item label="状态：">
              <span>{{statusType[formFormatData.formData.status]}}</span>
            </el-form-item>
            <el-form-item label="渠道标志：">
              <div v-if="formFormatData.formData.wechat_openid&&formFormatData.formData.wechat_openid!='0'">
                <el-tooltip class="item" effect="dark" :content="sourceType[4]" placement="top">
                  <img height="20" width="20" :src="sourceImg[4]" alt />
                </el-tooltip>
                <span>{{formFormatData.formData.wechat_openid}}</span>
              </div>
              <div v-if="formFormatData.formData.open_id&&formFormatData.formData.open_id!='0'">
                <el-tooltip class="item" effect="dark" :content="sourceType[2]" placement="top">
                  <img height="20" width="20" :src="sourceImg[2]" alt />
                </el-tooltip>
                <span>{{formFormatData.formData.open_id}}</span>
              </div>
              <div v-if="formFormatData.formData.alipay_openid&&formFormatData.formData.alipay_openid!='0'">
                <el-tooltip class="item" effect="dark" :content="sourceType[7]" placement="top">
                  <img height="20" width="20" :src="sourceImg[7]" alt />
                </el-tooltip>
                <span>{{formFormatData.formData.alipay_openid}}</span>
              </div>
              <div v-if="formFormatData.formData.baidu_openid&&formFormatData.formData.baidu_openid!='0'">
                <el-tooltip class="item" effect="dark" :content="sourceType[8]" placement="top">
                  <img height="20" width="20" :src="sourceImg[8]" alt />
                </el-tooltip>
                <span>{{formFormatData.formData.baidu_openid}}</span>
              </div>
              <div v-if="formFormatData.formData.toutiao_openid&&formFormatData.formData.toutiao_openid!='0'">
                <el-tooltip class="item" effect="dark" :content="sourceType[9]" placement="top">
                  <img height="20" width="20" :src="sourceImg[9]" alt />
                </el-tooltip>
                <span>{{formFormatData.formData.toutiao_openid}}</span>
              </div>
            </el-form-item>
            <!-- <el-form-item label="性别：">
                        <span>{{sexType[formFormatData.formData.gender]}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="注册来源：">
                        <span>{{sourceType[formFormatData.formData.source]}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="优惠券：">
                        <span>{{formFormatData.formData.couponNum}}</span>
            </el-form-item>-->
          </el-form>
        </div>
      </div>
      <div class="wlm-form">
        <div class="wlm-form-header">
          <div class="flex-row flex-justify-b">
            <span>分销信息</span>
            <!-- <router-link tag="span" :to="{path:'/orders/ordersManagement', query :{}}">
            </router-link>-->
            <el-popover placement="right" trigger="hover">
              <router-link tag="p" style="text-align:center;padding: 3px 0;" :to="{path:'/orders/ordersVerificationManagement', query :{user_id:formFormatData.formData.user_id}}">
                <span class="pointer">核销订单</span>
              </router-link>
              <router-link tag="p" style="text-align:center;padding: 3px 0;" :to="{path:'/orders/ordersComeStoreManagement', query :{user_id:formFormatData.formData.user_id}}">
                <span class="pointer">自提订单</span>
              </router-link>
              <router-link tag="p" style="text-align:center;padding: 3px 0;" :to="{path:'/orders/ordersExpressManagement', query :{user_id:formFormatData.formData.user_id}}">
                <span class="pointer">快递订单</span>
              </router-link>
              <router-link
                v-if="patSetting.plugin.kammi.open"
                tag="p"
                style="text-align:center;padding: 3px 0;"
                :to="{path:'/orders/ordersCardPasswordManagement', query :{user_id:formFormatData.formData.user_id}}"
              >
                <span class="pointer">卡密订单</span>
              </router-link>
              <el-button type="text" style="padding:0;" slot="reference">订单列表</el-button>
            </el-popover>
          </div>
        </div>
        <div class="orbox flex-row flex-justify-a">
          <div>
            <p>分销订单</p>
            <div class="flex-row flex-align-c">
              <span style="margin-right:10px;">{{formFormatData.formData.dealer.order_count}}</span>
              <router-link class="wlm-text" tag="a" target="_blank" :to="{path:'/distribution/distributorOrders', query:{
                user_id:formFormatData.formData.user_id,
                store_user_id:$route.query.store_user_id?$route.query.store_user_id:'',
                  h_aid:$route.query.h_aid?$route.query.h_aid:'',}}">
                <el-button type="text" size="small" >查看</el-button>
              </router-link>
            </div>
          </div>
          <div>
            <p>可提现</p>
            <div class="flex-row flex-align-c">
              <span style="margin-right:10px;">{{formFormatData.formData.dealer.current||'-'}}</span>
              <el-button type="text" size="small" @click="balanceChange(3)">调整</el-button>
            </div>
          </div>
          <div>
            <p>已提现</p>
            <p>{{formFormatData.formData.dealer.total}}</p>
          </div>
          <div>
            <p>提现中</p>
            <p>{{formFormatData.formData.dealer.ing}}</p>
          </div>
        </div>
        <div class="wlm-form-content flex-row flex-justify-b">
          <el-form :ref="formFormatData.key" style="margin-left:20px;" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form">
            <el-form-item label="成为时间">
              <span>{{formFormatData.formData.dealer.create_time||'-'}}</span>
            </el-form-item>
            <el-form-item label="上级">
              <div class="flex-row">
                <p>
                  <span>{{formFormatData.formData.dealer.re_nickName||'-'}}</span>
                  <span style="margin-left:20px;">绑定时间：{{formFormatData.formData.dealer.update_time}}</span>
                </p>
              </div>
            </el-form-item>
            <el-form-item label="更换上级">
              <chooseUser :config="initChooseUser" ref="chooseUser" :changeEvt="userChange"></chooseUser>
            </el-form-item>
            <el-form-item label="下级" v-if="formFormatData.formData.is_dealer=='是'">
              <div class="flex-row">
                <span>一级</span>
                <span style="margin-left:20px;">{{formFormatData.formData.dealer.tame_number_1}}</span>
                <router-link
                  style="margin-left:20px;"
                  target="_blank"
                  slot="reference"
                  tag="a"
                  :to="{path:'/distribution/offline', query:{
                    user_id:formFormatData.formData.user_id,avatarUrl:formFormatData.formData.avatarUrl,nickName:formFormatData.formData.nickName,xjfxs_num:formFormatData.formData.dealer.xjfxs_num,xx_num:formFormatData.formData.dealer.xx_num,
                    store_user_id:$route.query.store_user_id?$route.query.store_user_id:'',
                  h_aid:$route.query.h_aid?$route.query.h_aid:'',}}"
                >
                  <el-button type="text" size="small">查看</el-button>
                </router-link>
              </div>
              <p>
                <span>二级</span>
                <span style="margin-left:20px;">{{formFormatData.formData.dealer.tame_number_2}}</span>
              </p>
              <p>
                <span>三级</span>
                <span style="margin-left:20px;">{{formFormatData.formData.dealer.tame_number_3}}</span>
              </p>
            </el-form-item>
            <!-- <el-form-item label="消费金额">
                        <span><span class="orders-red">￥{{formFormatData.formData.pay_money}}</span></span>
            </el-form-item>-->
            <!-- <el-form-item label="登陆次数">
                        <span>{{formFormatData.formData.login_time}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="优惠券(张)" v-if="formFormatData.formData.couponNum>=0&&formFormatData.formData.couponUseNum>=0">
                        <span>{{formFormatData.formData.couponNum - formFormatData.formData.couponUseNum}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="优惠券领取个数">
                        <span>{{formFormatData.formData.couponNum}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="优惠券使用个数">
                        <span>{{formFormatData.formData.couponUseNum}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="消费次数">
                        <span>{{formFormatData.formData.pay_order}}</span>
            </el-form-item>-->
            <!-- <el-form-item label="优惠券（张）">
                        <span>{{formFormatData.formData.couponNum}}</span>
            </el-form-item>-->
          </el-form>
        </div>
      </div>
    </section>
    <section class="flex-row flex-warp form-group" v-if="formFormatData.formData.member.length>0">
      <div class="wlm-form">
        <div class="wlm-form-header">
          <div class="flex-row flex-justify-b">
            <span>会员信息</span>
          </div>
        </div>
        <div class="wlm-form-content flex-row flex-justify-b">
          <el-form
            :ref="formFormatData.key"
            style="margin-left:20px;width: 50%;"
            :model="formFormatData.formData"
            :rules="formFormatData.rules"
            size="small"
            label-width="80px"
            class="retail-form"
            label-position="left"
          >
            <el-form-item label="会员卡名称">
              <span>{{formFormatData.formData.member[0]['card_title']}}</span>
            </el-form-item>
            <el-form-item label="开通时间">
              <span>{{formFormatData.formData.member[0]['create_time']}}</span>
            </el-form-item>
          </el-form>
          <el-form
            :ref="formFormatData.key"
            style="margin-left:82px;width: 50%;"
            :model="formFormatData.formData"
            :rules="formFormatData.rules"
            size="small"
            label-width="80px"
            class="retail-form"
            label-position="left"
          >
            <el-form-item label="会员卡号">
              <span>{{formFormatData.formData.member[0]['card_number']}}</span>
            </el-form-item>
            <el-form-item label="到期时间">
              <span>{{formFormatData.formData.member[0]['card_end_time'] | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </section>

    <div class="wlm-form">
      <div class="wlm-form-header">收货地址</div>
      <div class="wlm-form-content">
        <div class="wlm-table">
          <div class="wlm-table-content">
            <el-table :ref="tableFormatData.announcement.key" :data="formFormatData.formData.address" style="width: 100%">
              <el-table-column prop="date" label="收货人">
                <template slot-scope="scope">
                  <p>{{scope.row.name}}</p>
                  <!-- <p>ID:{{scope.row.user_id}}</p> -->
                </template>
              </el-table-column>
              <el-table-column prop="date" label="联系方式">
                <template slot-scope="scope">
                  <span>{{scope.row.phone}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="地址">
                <template slot-scope="scope" v-if="scope.row.region">
                  <span>{{`${scope.row.region['province']}-${scope.row.region['city']}-${scope.row.region['region']}`}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="是否默认">
                <template slot-scope="scope">
                  <span>{{scope.row.default == '1'?'是':'否'}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="wlm-form">
    <div class="wlm-form-header">购买记录</div>
    <div class="wlm-form-content">
      <div class="wlm-table">
        <div class="wlm-table-content">
          <el-table :ref="tableFormatData.announcement.key" :data="tableFormatData.announcement.tableData" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column prop="date" label="订单编号" >
              <template slot-scope="scope">
                <span>夏季西裤</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="商品名称" >
              <template slot-scope="scope">
                <span>aML1445</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="实付金额" >
              <template slot-scope="scope">
                <p class="orders-red"><span>￥</span>156</p>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="订单来源" >
              <template slot-scope="scope">
                <span>3222 2225 2221</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="订单类型" >
              <template slot-scope="scope">
                <span>3222 2225 2221</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="订单状态" >
              <template slot-scope="scope">
                <span>待付款</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" >
              <template slot-scope="scope">
                <router-link class="wlm-text" tag="span" to="/orders/ordersManagementDetail">
                  <el-button type="text">查看订单</el-button>
                </router-link>
              </template>

            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    </div>-->
  </div>
</template>

<script>
import upload from '@/components/Upload/index'
import ChooseUser from '@/components/ChooseUser/index'
import power from '@/mixins/power'
import {
  userGet,
  userOp,
  recharge,
  editMoney,
  editReferee
} from '@/api/user'
import {
  distributorUser
} from '@/api/distribution'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form'), mixins.getters('Table'), power],
  name: 'ManagementUserEdit',
  components: {
    upload,
    ChooseUser
  },
  computed: {

  },
  directives: {

  },
  data() {
    return {
      update_money: '',
      update_class: '',
      update_explain: '',
      statusType: {
        '1': '正常',
        '2': '已注销',
        '3': '黑名单',
        '-': '-'
      },
      sexType: {
        0: '未知',
        1: '男',
        2: '女'
      },
      sourceType: {
        '1': '导入',
        '2': '微信小程序',
        '3': 'H5',
        '4': '公众号',
        '5': '安卓',
        '6': '苹果',
        '7': '支付宝小程序',
        '8': '百度小程序',
        '9': '头条小程序',
        '-': '-'
      },
      dialogTableVisible: false,
      userdialog: false,
      rechargedialog: false,
      defaultMsg: '',
      platformConfig: {
        type: ['image'],
        initList: []
      },
      initChooseUser: {
        closable: true,
        initList: [],
        requestApi: distributorUser
      },
      formFormatData: {
        key: 'smsSettings',
        api: {
          editForm: {
            api: userGet,
            params: {
              redirect: 'user_id',
              always: true
            }
          },
          submitForm: userOp
        },
        formData: {
          member: '',
          op: 'edit',
          pay_money: '0.00',
          pay_order: '0',
          num: '',
          tag: [],
          balance: '',
          integral: '',
          dealer: {},
          status: '-',
          couponNum: '-',
          avatarUrl: this.$store.getters.usersAvatar,
          couponUseNum: '-',
          login_time: '0',
          create_time: '-',
          nickName: '-',
          mobile: '',
          gender: 0,
          wechat_openid: '',
          open_id: '',
          alipay_openid: '',
          baidu_openid: '',
          toutiao_openid: '',
          class: -1,
          user_id: '-',
          credit2: '0.00',
          source: '-',
          address: [],
          address_default: null,
          is_dealer: this.$route.query.is_dealer
        },
        rules: {
          appKey: [{
            required: true,
            message: '请输入App Key',
            trigger: 'blur'
          }],
          appSecret: [{
            required: true,
            message: '请输入App Secret',
            trigger: 'blur'
          }]
        }
      },
      tableFormatData: {
        current: 'announcement',
        announcement: {
          key: 'announcement',
          tableData: [],
          files: {
            status: '1',
            title: '',
            ids: [],
            checkall: '0',
            Recycle: '0'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    userChange(userlist) {
      const [item] = userlist
      if (item) {
        editReferee({ dealer_id: item.user_id, user_id: this.formFormatData.formData.user_id }).then(res => {
          const { data: { code } } = res
          if (code === 1) {
            this.$message.success('修改成功！')
            this.formFormatEditEvt()
          }
        })
      } else {
        editReferee({ dealer_id: 0, user_id: this.formFormatData.formData.user_id }).then(res => {
          const { data: { code } } = res
          if (code === 1) {
            this.$message.success('未选择用户将更改为无上级！')
            this.formFormatEditEvt()
          }
        })
      }

      //   if (item) {
      //     this.saveData.referee_id = item.user_id
      //   } else {
      //     this.saveData.referee_id = 0
      //   }
    },
    clearBalance() {
      this.update_money = ''
      this.update_class = ''
      this.update_explain = ''
    },
    balanceChange(val) {
      this.rechargedialog = true
      this.update_class = val
    },
    saveBalanceChange() {
      if (this.update_class !== 3) {
        recharge({ class: this.update_class, update_money: this.update_money, explain: this.update_explain, user_id: this.formFormatData.formData.user_id }).then(res => {
          const { data: { code } } = res
          if (code === 1) {
            this.$message.success('修改成功！')
          }
        })
      } else {
        editMoney({ money: this.update_money, explain: this.update_explain, user_id: this.formFormatData.formData.user_id }).then(res => {
          const { data: { code } } = res
          if (code === 1) {
            this.$message.success('修改成功！')
          }
        })
      }
      this.rechargedialog = false
      this.formFormatEditEvt()
    },
    formDialogEvt() {
      this.dialogTableVisible = true
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: { address_default } } } = response
        if (address_default) {
          this.formFormatData.formData.address.push(address_default)
        }
      } else if (type === 'submitForm') {
        const { data: { code, data: credit2 } } = response
        this.formFormatData.formData.remark = ''
        this.formFormatData.formData.num = ''
        if (code === 1) {
          this.formFormatData.formData.credit2 = Number(credit2).toFixed(2)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.management-user-edit {
  font-size: 14px;

  .orbox {
    background: #ffeee6;
    padding: 20px;
    margin: 20px 20px 0;
  }

  .form-group {
    .wlm-form {
      width: 500px;
      flex-grow: 1;
      margin-right: 20px;
    }
  }

  .total-money {
    font-size: 14px;
    margin-bottom: 58px;

    .total-title {
      display: inline-block;
      text-align: right;
      width: 70px;
      margin-right: 10px;
    }
  }

  .wlm-form {
    min-height: auto;
  }

  .wlm-form-steps {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .send-type {
    margin-top: 15px;

    .el-button {
      padding: 20px 40px;

      & > span {
        & > p {
          font-weight: 600;
          margin-bottom: 15px;
        }

        & > span {
          display: inline-block;
          margin-bottom: 5px;
          color: #c3c3c3;
        }
      }
    }
  }
}
</style>
